<template>
	<div>
		<div style="background:url(http://lak110.gitee.io/gdapp/src/images/banner2.png);background-size:cover;">
			<div class="status-top"></div>
		</div>
		<ul class="order-con">
			<li class="order-item flexLeft">
				<span style="font-size: 16px;color: #333333;">接单结果：</span>
				<div class="flexAround" style="flex: 1;">
					<label for="yes" style="font-size: 16px;color: #333333;">
						<input id="yes" type="radio" name="result">
						已解决
					</label>
					<label for="none" style="font-size: 16px;color: #333333;">
						<input id="none" type="radio" name="result">
						未解决
					</label>
					<label for="donot" style="font-size: 16px;color: #333333;">
						<input id="donot" type="radio" name="result">
						处理不了
					</label>
				</div>
			</li>
			<li class="order-item flexLeft">
				<span style="font-size: 16px;color: #333333;">反馈描述：</span>
				<textarea placeholder="请填写反馈描述" v-model="result"></textarea>
			</li>
			<li class="order-item flexLeft">
				<span style="font-size: 16px;color: #333333;">上传图片：</span>
				<div id="lrzImg" class="flexLeft">
					<img :src="item" alt="" v-for="item in lrzImg">
					<label for="upImg" class="iconfont icon-tupian"></label>
				</div>
			</li>

			<div style="text-align: center;margin-top: 50px;" @click="updateMeterMaintain()">
				<mt-button type="primary">确定提交</mt-button>
			</div>
			<input id="upImg" type="file" accept="image/*" @change="onFileChange" style="display: none;">
		</ul>



	</div>
</template>

<script>
	import {
		Button
	} from 'mint-ui';
	import lrz from 'lrz' //压缩库
	export default {
		components: {
			Button
		},
		data() {
			return {
				lrzImg: [],
				lrzImgStr: [],
				result: ''
			}
		},
		methods: {
			onFileChange(e) {
				var _this = this;
				let files = e.target.files || e.dataTransfer.files
				lrz(files[0], {
						fieldName: 'files'
					})
					.then(function(rst) {
						return rst;
					}).then(function(rst) { // 跟后台进行ajax数据交互，把数据传给后端
						_this.upImageFile(rst.base64);
						return rst;
					}).catch(function(err) { // 而且以上的then都不会执行// 如果出错了，这里可以捕捉到错误信息
						alert(err);
					}).always(function() { // 不管是成功失败，这里都会执行
					});
			},
			updateMeterMaintain() {
				this.$axios.post('gdiot/meter/updateMeterMaintain', {
					"id": this.$route.query.id,
					"dealResult": this.result,
					"imgs": this.lrzImgStr.join(',')
				}).then((p) => {
					if (p.data.error == '100') {
						this.$mint.Toast({
							message: p.data.msg,
							iconClass: 'iconfont icon-dui',
							duration: 1500
						});
						setTimeout(() => {
							this.$router.back(-1);
						}, 1500)
					}
				})
			},
			upImageFile(base64Codes) {
				var formData = new FormData();
				formData.append("files", this.convertBase64UrlToBlob(base64Codes)); //将base64编码转换为Blob 
				formData.append("id", this.$route.query.id);
				var instance = this.$axios.create({
					baseURL: 'http://47.103.102.210:9081/',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': JSON.parse(sessionStorage.getItem('userInfo')).token
					}
				});
				this.$mint.Indicator.open({
					spinnerType: 'fading-circle'
				});
				instance.post('gdiot/meter/upload', formData).then(p => {
					this.$mint.Indicator.close();
					this.lrzImg.push(p.data.result.path);
					this.lrzImgStr.push(p.data.result.name);
				})

			},
			convertBase64UrlToBlob(urlData) {
				var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte  
				var ab = new ArrayBuffer(bytes.length); //处理异常,将ascii码小于0的转换为大于0  
				var ia = new Uint8Array(ab);
				for (var i = 0; i < bytes.length; i++) {
					ia[i] = bytes.charCodeAt(i);
				}
				return new Blob([ab], {
					type: 'image/png'
				});
			}
		},
		created() {


		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.status-top {
		height: 2.97rem;
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(http://lak110.gitee.io/gdapp/src/images/wave.gif);
		mix-blend-mode: screen;
		vertical-align: middle;
	}

	textarea {
		border: 1px solid #F0F0F0;
		border-radius: 4px;
		flex: 1;
		height: 60px;
		padding: 5px;
	}

	input[type='radio'] {
		margin: 3px;
	}


	.order-con {
		padding: 10px;
		background: white;

		.order-item {
			margin-bottom: 0.63rem;

			.flexLeft {
				flex: 1;
			}

			.iconfont {
				font-size: 2.2rem;
				color: #aaaaaa;
			}
		}
	}

	#lrzImg {
		flex-wrap: wrap;

		img {
			height: 2.21rem;
			border-radius: 3px;
			margin-left: 0.85rem;
		}
	}
</style>
